<template>
	<view class="confirm-order">
		<!-- 导航栏 -->
		<u-navbar leftText="返回" title="确认订单" :safeAreaInsetTop="false"
			:titleStyle="{ fontSize: '16px', fontWeight: 'bold' }">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="16" @click="goBack"></u-icon>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="nav-right-icons">
					<u-icon name="more-dot-fill" size="16" style="margin-right: 8px;"></u-icon>
					<u-icon name="minus" size="16"></u-icon>
				</view>
			</view>
		</u-navbar>

		<view class="content">
			<!-- 会员状态提示 -->
			<view class="member-notice">
				<text class="notice-text">您现在不是会员，充值会员后，您可得到 <text class="rebate-amount">¥0.00</text> 返利</text>
			</view>

			<!-- 配送方式选择 -->
			<view class="delivery-section">
				<view class="delivery-tabs">
					<view 
						class="tab-item" 
						:class="{ active: currentDelivery === 0 }" 
						@click="onDeliveryChange(0)"
					>
						<text class="tab-text">外卖配送</text>
						<view class="tab-line" v-if="currentDelivery === 0"></view>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: currentDelivery === 1 }" 
						@click="onDeliveryChange(1)"
					>
						<text class="tab-text">门店自取</text>
						<view class="tab-line" v-if="currentDelivery === 1"></view>
					</view>
				</view>
				<view class="delivery-divider"></view>

				<!-- 门店自取信息 -->
				<view v-if="currentDelivery === 1" class="pickup-info">
					<view class="info-item">
						<text class="label">商家地址</text>
						<view class="store-info">
							<text class="store-name">平安皮鞋百货店 (大桥市场)</text>
							<text class="store-address">柳州市鱼峰区百越商城-1号楼</text>
						</view>
					</view>
					<view class="info-item">
						<text class="label">自取时间</text>
						<view class="time-section" @click="selectPickupTime">
							<text class="pickup-time">{{ pickupTime }}</text>
						</view>
						<u-icon name="arrow-right" size="14" color="#999" @click="selectPickupTime"></u-icon>
					</view>
					<view class="info-item">
						<text class="label">预留电话</text>
						<view class="phone-section">
							<input 
								v-model="pickupPhone" 
								type="number" 
								placeholder="请输入手机号"
								class="phone-input"
								:maxlength="11"
							/>
						</view>
					</view>
				</view>

				<!-- 外卖配送信息 -->
				<view v-else class="delivery-info">
					<view class="delivery-address" @click="selectAddress">
						<image src="/static/icons/地图.png" mode="widthFix" class="icon-small"></image>
						<text class="address-text">{{ deliveryAddress.address || '请选择配送地址' }}</text>
						<u-icon name="arrow-right" size="14" color="#999"></u-icon>
					</view>
					<view class="delivery-contact">
						<image src="/static/icons/电话.png" mode="widthFix" class="icon-small"></image>
						<text class="contact-text">{{ deliveryAddress.phone || '暂无' }}</text>
						<text class="contact-name">{{ deliveryAddress.name || '' }}</text>
					</view>
					<view class="delivery-time">
						<text class="time-label">立即送出</text>
						<text class="estimated-time">大约{{ estimatedDeliveryTime }}送达</text>
					</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="order-items">
				<view class="store-header">
					<text class="store-title">平安皮鞋百货店 (大桥市场)</text>
				</view>
				<view class="item-list">
					<view class="item">
						<view class="item-info">
							<text class="item-name">藤席</text>
							<text class="item-spec">60×120</text>
						</view>
						<view class="item-price">
							<text class="quantity">x1</text>
							<text class="price">¥22</text>
						</view>
					</view>
					<view class="item">
						<view class="item-info">
							<text class="item-name">包装费</text>
							<text class="item-spec">商品包装费</text>
						</view>
						<view class="item-price">
							<text class="price">¥0</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 价格总计 -->
			<view class="price-summary">
				<view class="total-section">
					<text class="total-label">总计:</text>
					<view class="price-details">
						<text class="original-price">¥{{ orderInfo.originalTotal }}</text>
						<text class="final-price">¥{{ orderInfo.finalTotal }}</text>
					</view>
				</view>
			</view>

			<!-- 优惠券 -->
			<view class="coupon-section">
				<text class="section-title">优惠券</text>
				<view class="coupon-selector">
					<text class="no-coupon">无可用优惠券</text>
					<u-icon name="arrow-right" size="14" color="#007aff"></u-icon>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="payment-section">
				<text class="section-title">支付方式</text>
				<view class="payment-method">
					<view class="payment-option" :class="{ active: selectedPayment === 'wechat' }"
						@click="selectPayment('wechat')">
						<view class="payment-info">
							<image src="/static/WeChatPayImg/微信支付-绿色.png" mode="widthFix" class="icon-small"></image>
							<text class="pay-text">微信支付</text>
						</view>
						<view class="checkbox" :class="{ checked: selectedPayment === 'wechat' }">
							<u-icon v-if="selectedPayment === 'wechat'" name="checkmark" size="16"
								color="#fff"></u-icon>
						</view>
					</view>
					<view class="payment-option" :class="{ active: selectedPayment === 'points' }"
						@click="selectPayment('points')">
						<view class="payment-info">
							<image src="/static/钱.png" mode="widthFix" class="icon-small"></image>
							<text class="pay-text">平台积分</text>
						</view>
						<view class="checkbox" :class="{ checked: selectedPayment === 'points' }">
							<u-icon v-if="selectedPayment === 'points'" name="checkmark" size="16"
								color="#fff"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 特殊备注 -->
			<view class="remarks-section">
				<view class="remarks-header">
					<text class="section-title">特殊备注要求</text>
					<text class="char-count">{{ remarks.length }}/30</text>
				</view>
				<view class="remarks-input">
					<u-textarea v-model="remarks" placeholder="输入其他特殊备注要求 (可不填)" :maxlength="30" :height="80"
						:autoHeight="true" :showWordLimit="false" :border="false" :customStyle="{
							backgroundColor: '#f8f8f8',
							padding: '16rpx',
							borderRadius: '8rpx',
							fontSize: '14px'
						}"></u-textarea>
				</view>
			</view>
		</view>

		<!-- 底部支付栏 -->
		<view class="bottom-payment">
			<view class="payment-info">
				<text class="payment-label">还需支付</text>
				<text class="payment-amount">¥{{ orderInfo.finalTotal }}</text>
			</view>
			<view class="pay-button" @click="goToPay">
				<text class="pay-text">去支付</text>
			</view>
		</view>

		<!-- 会员广告弹窗 -->
		<u-popup :show="showMemberAd" mode="center" :closeable="true" :mask-close-able="true" :round="20"
			@close="showMemberAd = false">
			<view class="member-ad-popup">
				<!-- 自定义关闭按钮 -->
				<view class="ad-close-btn" @click="closeAdOnly">
					<u-icon name="close" size="20" color="#fff"></u-icon>
				</view>
				<view class="ad-header">
					<text class="ad-title">加入会员</text>
					<text class="ad-subtitle">获好友返利</text>
				</view>
				<view class="ad-content">
					<view class="ad-description">
						<text class="description-text">加入会员享受更多优惠</text>
					</view>
				</view>
				<view class="ad-button" @click="closeMemberAd">
					<text class="button-text">立即加入</text>
				</view>
			</view>
		</u-popup>



		<!-- 微信支付选择弹窗 -->
		<u-popup :show="showWechatPayModal" mode="center" :closeable="true" :mask-close-able="true" :round="20"
			@close="showWechatPayModal = false">
			<view class="wechat-pay-modal">
				<view class="modal-header">
					<image src="/static/WeChatPayImg/微信支付-灰色.png" mode="widthFix" class="icon-small1"></image>
					<text class="modal-title">订单支付</text>
				</view>
				<view class="payment-options">
					<view class="payment-option-item" @click="selectWechatPayMethod('mobile')">
						<view class="option-content">
							<text class="option-text">发送到手机微信支付</text>
						</view>
					</view>
					<view class="payment-option-item1" @click="selectWechatPayMethod('qrcode')">
						<view class="option-content">
							<text class="option-text1">二维码支付</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 支付密码输入弹窗 -->
		<u-popup :show="showPasswordModal" mode="center" :closeable="true" :mask-close-able="true" :round="20"
			@close="showPasswordModal = false">
			<view class="password-modal">
				<view class="modal-header">
					<text class="modal-title">输入支付密码</text>
				</view>
				<view class="password-content">
					<text class="password-tip">使用会员卡余额支付需要验证身份，验证通过后才可进行支付。</text>
					<view class="password-input">
						<view class="input-boxes">
							<view class="input-box" v-for="(digit, index) in 6" :key="index">
								<text v-if="passwordDigits[index]" class="password-dot">●</text>
							</view>
						</view>
					</view>
					<!-- 数字键盘 -->
					<view class="number-keyboard">
						<view class="keyboard-row" v-for="(row, rowIndex) in keyboardRows" :key="rowIndex">
							<view class="keyboard-key" v-for="key in row" :key="key" @click="handleKeyPress(key)">
								<text v-if="key !== 'delete'" class="key-text">{{ key }}</text>
								<u-icon v-else name="backspace" size="20" color="#333"></u-icon>
							</view>
						</view>
					</view>
					<view class="password-footer">
						<text class="forgot-password" @click="forgotPassword">忘记密码</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 二维码支付弹窗 -->
		<u-popup :show="showQrcodeModal" mode="center" :closeable="true" :mask-close-able="true" :round="20"
			@close="showQrcodeModal = false">
			<view class="qrcode-modal">
				<view class="modal-header">
					<text class="modal-title">使用手机微信扫码支付</text>
				</view>
				<view class="qrcode-content">
					<view class="qrcode-placeholder">
						<image src="/static/icons/二维码.jpg" mode="widthFix" class="qrcode-image"></image>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 时间选择器弹窗 -->
		<u-popup :show="showTimePicker" mode="bottom"  :mask-close-able="true" :round="20"
			@close="cancelTimeSelection">
			<view class="time-picker-modal">
				<view class="picker-header">
					<text class="cancel-btn" @click="cancelTimeSelection">取消</text>
					<text class="picker-title">选择自取时间</text>
					<text class="confirm-btn" @click="confirmTimeSelection">确定</text>
				</view>
				<view class="picker-content">
					<view class="picker-column">
						<text class="column-title">小时</text>
						<scroll-view scroll-y class="picker-scroll">
							<view 
								class="picker-item" 
								v-for="hour in hourOptions" 
								:key="hour"
								:class="{ active: selectedHour === hour }"
								@click="selectedHour = hour"
							>
								<text class="item-text">{{ hour.toString().padStart(2, '0') }}</text>
							</view>
						</scroll-view>
					</view>
					<view class="picker-separator">
						<text class="separator-text">:</text>
					</view>
					<view class="picker-column">
						<text class="column-title">分钟</text>
						<scroll-view scroll-y class="picker-scroll">
							<view 
								class="picker-item" 
								v-for="minute in minuteOptions" 
								:key="minute"
								:class="{ active: selectedMinute === minute }"
								@click="selectedMinute = minute"
							>
								<text class="item-text">{{ minute.toString().padStart(2, '0') }}</text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 手机微信支付弹窗 -->
		<u-popup :show="showMobilePayModal" mode="center" :closeable="true" :mask-close-able="true" :round="20"
			@close="showMobilePayModal = false">
			<view class="mobile-pay-modal">
				<view class="modal-header">
					<image src="/static/WeChatPayImg/微信支付logo.png" mode="widthFix"
						style="width: 180rpx;margin-top: 40rpx;"></image>
				</view>
				<view class="mobile-pay-content">
					<text class="mobile-pay-tip">订单支付请求已发送到手机，需在手机上完成支付。</text>
					<view class="mobile-pay-button" @click="closeMobilePayModal">
						<text style="color: #9ca8c0;font-size: 28rpx;margin-top: 20rpx;">取消</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deliveryList: ['外卖配送', '门店自取'],
			currentDelivery: 0, // 默认选择外卖配送
			selectedPayment: 'wechat', // 默认选择微信支付
			remarks: '', // 特殊备注
			showMemberAd: false, // 会员广告弹窗
			showWechatPayModal: false, // 微信支付选择弹窗
			showPasswordModal: false, // 支付密码输入弹窗
			showQrcodeModal: false, // 二维码支付弹窗
			showMobilePayModal: false, // 手机微信支付弹窗
			passwordDigits: [], // 支付密码数字
			passwordInput: '', // 密码输入值
			keyboardRows: [
				['1', '2', '3'],
				['4', '5', '6'],
				['7', '8', '9'],
				['', '0', 'delete']
			],
			orderInfo: {
				storeName: '平安皮鞋百货店 (大桥市场)',
				storeAddress: '柳州市鱼峰区百越商城-1号楼',
				pickupTime: '14:17',
				phone: '15136710282',
				items: [
					{
						name: '藤席',
						spec: '60×120',
						quantity: 1,
						price: 22
					}
				],
				packagingFee: 0,
				originalTotal: 25.5,
				finalTotal: 22 // 更新为图片中的金额
			},
			// 门店自取相关
			pickupTime: '14:17',
			pickupPhone: '',
			// 外卖配送相关
			deliveryAddress: {
				address: '广西壮族自治区柳州市 鱼峰区柳州市第八中学南校区',
				phone: '18711389426',
				name: '张先生'
			},
			estimatedDeliveryTime: '',
			// 时间选择器相关
			showTimePicker: false,
			selectedHour: 14,
			selectedMinute: 30,
			hourOptions: [],
			minuteOptions: []
		}
	},
	methods: {
		goBack() {
				uni.navigateBack();
			},
		onDeliveryChange(index) {
			this.currentDelivery = index;
			console.log('切换配送方式:', index === 0 ? '外卖配送' : '门店自取');
		},
		// 选择自取时间
		selectPickupTime() {
			// 显示时间选择器
			this.showTimePicker = true;
		},
		// 确认时间选择
		confirmTimeSelection() {
			this.pickupTime = `${this.selectedHour.toString().padStart(2, '0')} ${this.selectedMinute.toString().padStart(2, '0')}`;
			this.showTimePicker = false;
		},
		// 取消时间选择
		cancelTimeSelection() {
			this.showTimePicker = false;
		},
		// 选择配送地址
		selectAddress() {
			uni.showToast({
				title: '跳转到地址选择页面',
				icon: 'none'
			});
			// 这里可以跳转到地址选择页面
			// uni.navigateTo({
			// 	url: '/pages/address/address'
			// });
		},
		goToPay() {
			// 无论选择哪种支付方式，非会员都先显示广告
			console.log('显示会员广告');
			this.showMemberAd = true;
		},
		closeMemberAd() {
			console.log('关闭会员广告');
			this.showMemberAd = false;
			// 跳转到开通会员页面
			uni.navigateTo({
				url: '/pages/memberRecharge/memberRecharge'
			});
		},
		// 关闭广告后根据支付方式显示对应弹窗
		closeAdOnly() {
			console.log('关闭会员广告');
			this.showMemberAd = false;

			// 根据选择的支付方式显示对应弹窗
			if (this.selectedPayment === 'wechat') {
				// 微信支付：显示微信支付选择弹窗
				this.showWechatPayModal = true;
			} else if (this.selectedPayment === 'points') {
				// 平台积分：显示支付密码输入弹窗
				this.showPasswordModal = true;
			} else {
				// 其他支付方式直接处理
				this.handlePayment();
			}
		},
		selectWechatPayMethod(method) {
			console.log('选择微信支付方式:', method);
			this.showWechatPayModal = false;
			if (method === 'mobile') {
				// 发送到手机微信支付
				this.showMobilePayModal = true;
			} else if (method === 'qrcode') {
				// 二维码支付
				this.showQrcodeModal = true;
			}
		},
		handlePayment() {
			// 处理其他支付方式
			uni.showToast({
				title: '跳转支付页面',
				icon: 'none'
			});
		},
		handlePaymentResult(method) {
			// 处理支付结果
			console.log('支付方式:', method);
			// uni.showToast({
			// 	title: '支付处理中...',
			// 	icon: 'loading'
			// });
			uni.navigateTo({
				url:"/pages/orderDetail/orderDetail"
			})
		},
		selectCoupon() {
			uni.showToast({
				title: '选择优惠券',
				icon: 'none'
			});
		},
		selectPaymentMethod() {
			uni.showToast({
				title: '选择支付方式',
				icon: 'none'
			});
		},
		selectPayment(method) {
			this.selectedPayment = method;
		},
		// 处理键盘按键
		handleKeyPress(key) {
			if (key === 'delete') {
				// 删除最后一个数字
				if (this.passwordDigits.length > 0) {
					this.passwordDigits.pop();
				}
			} else if (key !== '' && this.passwordDigits.length < 6) {
				// 添加数字
				this.passwordDigits.push(key);

				// 如果输入了6位数字，自动验证
				if (this.passwordDigits.length === 6) {
					setTimeout(() => {
						this.verifyPassword();
					}, 500);
				}
			}
		},
		// 验证支付密码
		verifyPassword() {
			// 模拟密码验证
			setTimeout(() => {
				const inputPassword = this.passwordDigits.join('');
				if (inputPassword === '123456') {
					// 密码正确
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
					this.showPasswordModal = false;
					this.passwordDigits = [];
				} else {
					// 密码错误
					uni.showToast({
						title: '密码错误',
						icon: 'error'
					});
					this.passwordDigits = [];
				}
			}, 1000);
		},
		// 忘记密码
		forgotPassword() {
			this.showPasswordModal = false;
			//到时候设置一个跳转到更新支付密码的页面
			uni.showModal({
				title: '忘记密码',
				content: '请联系客服重置支付密码',
				showCancel: false,
				confirmText: '确定'
			});
		},
		// 关闭手机微信支付弹窗
		closeMobilePayModal() {
			this.showMobilePayModal = false;
			// 处理支付结果
			this.handlePaymentResult('mobile');
		},
		// 计算预计送达时间
		calculateDeliveryTime() {
			const now = new Date();
			const deliveryTime = new Date(now.getTime() + 40 * 60 * 1000); // 当前时间 + 40分钟
			const hours = deliveryTime.getHours().toString().padStart(2, '0');
			const minutes = deliveryTime.getMinutes().toString().padStart(2, '0');
			this.estimatedDeliveryTime = `${hours}:${minutes}`;
		},
		// 初始化自取时间
		initializePickupTime() {
			const now = new Date();
			const pickupTime = new Date(now.getTime() + 30 * 60 * 1000); // 当前时间 + 30分钟
			const hours = pickupTime.getHours();
			const minutes = pickupTime.getMinutes();
			
			this.selectedHour = hours;
			this.selectedMinute = minutes;
			this.pickupTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
			
			// 生成小时和分钟选项
			this.generateTimeOptions();
		},
		// 生成时间选项
		generateTimeOptions() {
			const now = new Date();
			const currentHour = now.getHours();
			const currentMinute = now.getMinutes();
			
			// 生成小时选项（当前小时到24）
			this.hourOptions = [];
			for (let i = currentHour; i <= 23; i++) {
				this.hourOptions.push(i);
			}
			
			// 生成分钟选项（当前分钟到59）
			this.minuteOptions = [];
			for (let i = currentMinute; i <= 59; i++) {
				this.minuteOptions.push(i);
			}
		}
	},
	mounted() {
		// 页面加载时计算送达时间和初始化自取时间
		this.calculateDeliveryTime();
		this.initializePickupTime();
	}
}
</script>

<style scoped>
.confirm-order {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.content {
	padding-top: 120rpx;
	padding-bottom: 120rpx;
}

.nav-right-icons {
	display: flex;
	align-items: center;
}

/* 会员通知 */
.member-notice {
	background-color: #fff;
	margin: 20rpx 2% 0;
	border-radius: 10rpx;
	padding: 20rpx;
}

.notice-text {
	font-size: 14px;
	color: #333;
}

.rebate-amount {
	color: #ff4757;
	font-size: 16px;
	font-weight: bold;
}

/* 配送方式 */
.delivery-section {
	background-color: #fff;
	margin: 20rpx 2% 0;
	border-radius: 10rpx;
	overflow: hidden;
}

/* 配送方式选项卡 */
.delivery-tabs {
	display: flex;
	position: relative;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
	position: relative;
}

.tab-text {
	font-size: 14px;
	color: #666;
	transition: all 0.3s ease;
}

.tab-item.active .tab-text {
	color: #007aff;
	font-weight: bold;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #007aff;
	border-radius: 2rpx;
}

.delivery-divider {
	height: 1rpx;
	background-color: #f0f0f0;
	margin: 0 20rpx;
}

.pickup-info,
.delivery-info {
	padding: 20rpx;
}

.info-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.info-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 14px;
	color: #999;
	width: 160rpx;
	flex-shrink: 0;
}

.store-info {
	flex: 1;
}

.store-name {
	font-size: 14px;
	color: #333;
	display: block;
	margin-bottom: 4rpx;
}

.store-address {
	font-size: 12px;
	color: #666;
}

.pickup-time {
	font-size: 14px;
	color: #333;
}

.phone-section {
	display: flex;
	align-items: center;
	flex: 1;
}

.phone-number {
	font-size: 14px;
	color: #333;
	flex: 1;
}

.phone-input {
	flex: 1;
	font-size: 14px;
	color: #333;
	border: none;
	outline: none;
	background: transparent;
}

.time-section {
	display: flex;
	align-items: center;
	flex: 1;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.info-item:last-child {
	margin-bottom: 0;
}

/* 外卖配送样式 */
.delivery-address,
.delivery-contact {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.icon-small {
	width: 30rpx;
	height: 30rpx;
	margin-right: 8rpx;
}

.icon-small1 {
	width: 70rpx;
	height: 70rpx;
}

.address-text,
.contact-text {
	font-size: 13px;
	color: #333;
	flex: 1;
}

.contact-name {
	font-size: 13px;
	color: #a1a4b3;
	margin-left: 18rpx;
}

.delivery-time {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.time-label {
	font-size: 12px;
	color: #333;
}

.estimated-time {
	font-size: 12px;
	color: #1d5aa5;
}

/* 商品信息 */
.order-items {
	background-color: #fff;
	margin: 20rpx 2% 0;
	border-radius: 10rpx;
}

.store-header {
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.store-title {
	font-size: 14px;
	color: #333;
	font-weight: bold;
}

.item-list {
	padding: 0 20rpx;
}

.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.item:last-child {
	border-bottom: none;
}

.item-info {
	flex: 1;
}

.item-name {
	font-size: 14px;
	color: #333;
	display: block;
	margin-bottom: 4rpx;
}

.item-spec {
	font-size: 12px;
	color: #999;
}

.item-price {
	display: flex;
	align-items: center;
}

.quantity {
	font-size: 12px;
	color: #999;
	margin-right: 8rpx;
}

.price {
	font-size: 14px;
	color: #333;
	font-weight: bold;
}

/* 价格总计 */
.price-summary {
	background-color: #fff;
	margin: 20rpx 2% 0;
	border-radius: 10rpx;
	padding: 20rpx;
}

.total-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.total-label {
	font-size: 14px;
	color: #333;
}

.price-details {
	display: flex;
	align-items: center;
}

.original-price {
	font-size: 12px;
	color: #999;
	text-decoration: line-through;
	margin-right: 8rpx;
}

.final-price {
	font-size: 16px;
	color: #333;
	font-weight: bold;
}

/* 优惠券和支付方式 */
.coupon-section,
.payment-section {
	background-color: #fff;
	margin: 20rpx 2% 0;
	border-radius: 10rpx;
	padding: 20rpx;
}

.section-title {
	font-size: 14px;
	color: #333;
}

.coupon-selector {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16rpx;
}

.no-coupon {
	font-size: 14px;
	color: #007aff;
}

.payment-method {
	margin-top: 16rpx;
}

.pay-text {
	font-size: 14px;
	color: #333;
	margin-left: 12rpx;
}

/* 底部支付栏 */
.bottom-payment {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1rpx solid #f0f0f0;
}

.payment-info {
	display: flex;
	align-items: center;
}

.payment-label {
	font-size: 14px;
	color: #333;
}

.payment-amount {
	font-size: 18px;
	color: #333;
	font-weight: bold;
	margin-left: 8rpx;
}

.pay-button {
	background-color: #004ca0;
	padding: 16rpx 40rpx;
	border-radius: 8rpx;
}

.pay-button .pay-text {
	color: #fff;
	font-size: 16px;

}

/* 支付方式选择 */
.payment-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	margin-bottom: 16rpx;
	border-radius: 12rpx;
	background-color: #f8f8f8;
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
}

.payment-option.active {
	background-color: #e8f5e8;
	border: 2rpx solid #07c160;
}

.payment-info {
	display: flex;
	align-items: center;
	flex: 1;
}

/* 复选框样式 */
.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ddd;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	transition: all 0.3s ease;
}

.checkbox.checked {
	background-color: #07c160;
	border-color: #07c160;
	transform: scale(1.1);
}

.payment-option:active {
	transform: scale(0.98);
}

/* 特殊备注 */
.remarks-section {
	background-color: #fff;
	margin: 20rpx 2% 0;
	border-radius: 10rpx;
	padding: 20rpx;
}

.remarks-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
}

.char-count {
	font-size: 12px;
	color: #999;
}

.remarks-input {
	background-color: #f8f8f8;
	border-radius: 8rpx;
	padding: 16rpx;
}

/* 会员广告弹窗 */
.member-ad-popup {
	background: linear-gradient(135deg, #FF6B35, #FF8E53);
	padding: 40rpx;
	width: 400rpx;
	text-align: center;
	position: relative;
	overflow: hidden;
	border-radius: 22rpx;
}

/* 广告关闭按钮 */
.ad-close-btn {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 60rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	transition: all 0.3s ease;
}

.ad-close-btn:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.9);
}



.ad-header {
	margin-bottom: 30rpx;
}

.ad-title {
	font-size: 32rpx;
	color: #fff;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.ad-subtitle {
	font-size: 24rpx;
	color: #fff;
	opacity: 0.9;
}

.ad-content {
	position: relative;
	margin: 40rpx 0;
}

.ad-description {
	text-align: center;
	margin: 20rpx 0;
}

.description-text {
	font-size: 28rpx;
	color: #fff;
	opacity: 0.9;
}



.ad-button {
	background: linear-gradient(135deg, #FFD700, #FFA500);
	border-radius: 50rpx;
	padding: 20rpx 60rpx;
	margin-top: 30rpx;
	box-shadow: 0 8rpx 16rpx rgba(255, 215, 0, 0.3);
}

.button-text {
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
}

/* 微信支付选择弹窗 */
.wechat-pay-modal {
	border-radius: 15px;
	background: #fff;
	padding: 100rpx 40rpx;
	width: 500rpx;
	height: 380rpx;
}



.modal-header {
	text-align: center;
	margin-bottom: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.modal-title {
	font-size: 30rpx;
	color: #333;
	display: block;
	margin-top: 46rpx;
}

.payment-options {
	margin-top: 30rpx;
}

.payment-option-item {
	width: 320rpx;
	margin-left: 74rpx;
	margin-top: 16rpx;
	background: #07c160;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	transition: all 0.3s ease;
}

.payment-option-item1 {
	width: 320rpx;
	margin-left: 74rpx;
	margin-top: 16rpx;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	transition: all 0.3s ease;
}

.payment-option-item:active {
	background: #06ad56;
	transform: scale(0.98);
}

.option-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.option-text {
	font-size: 28rpx;
	color: #fff;
	margin-left: 16rpx;
}

.option-text1 {
	font-size: 28rpx;
	color: #9ca8c0;
	margin-left: 16rpx;
}

/* 支付密码输入弹窗 */
.password-modal {
	background: #fff;
	width: 500rpx;
	height: 800rpx;
	border-radius: 15px;
	padding: 40rpx;
}

.password-content {
	margin-top: 30rpx;
}

.password-tip {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 40rpx;
	line-height: 1.5;
}

.password-input {
	margin-bottom: 40rpx;
	margin-top: 30rpx;
}

.input-boxes {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.input-box {
	width: 80rpx;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f8f8;
}

.password-dot {
	font-size: 32rpx;
	color: #333;
}

.password-footer {
	text-align: right;
}

.forgot-password {
	font-size: 28rpx;
	color: #007aff;
}

/* 数字键盘样式 */
.number-keyboard {
	margin-top: 40rpx;
}

.keyboard-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.keyboard-key {
	width: 120rpx;
	height: 80rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.keyboard-key:active {
	background: #e0e0e0;
	transform: scale(0.95);
}

.key-text {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

/* 二维码支付弹窗 */
.qrcode-modal {
	background: #fff;
	border-radius: 15px;
	padding: 40rpx;
	width: 460rpx;
	height: 500rpx;
}

.qrcode-content {
	margin-top: 30rpx;
	display: flex;
	justify-content: center;
}

.qrcode-placeholder {
	width: 300rpx;
	height: 300rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f8f8;
}

.qrcode-text {
	font-size: 28rpx;
	color: #999;
}

/* 手机微信支付弹窗 */
.mobile-pay-modal {
	background: #fff;
	padding: 40rpx;
	width: 460rpx;
	border-radius: 15px;
	height: 400rpx;
}

.mobile-pay-content {
	margin-top: 30rpx;
	text-align: center;
}

.mobile-pay-tip {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	margin-bottom: 40rpx;
	line-height: 1.5;
}

.mobile-pay-button {
	padding: 24rpx;
	margin-top: 20rpx;
	transition: all 0.3s ease;
}

.mobile-pay-button:active {
	transform: scale(0.98);
}

.mobile-pay-button .button-text {
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
}

/* 时间选择器样式 */
.time-picker-modal {
	background: #fff;
	padding: 0;
	width: 100%;
	height: 600rpx;
}

.picker-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 40rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.cancel-btn {
	font-size: 28rpx;
	color: #999;
}

.picker-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.confirm-btn {
	font-size: 28rpx;
	color: #007aff;
}

.picker-content {
	display: flex;
	align-items: center;
	padding: 40rpx;
	height: 400rpx;
}

.picker-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.column-title {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.picker-scroll {
	height: 300rpx;
	width: 100%;
}

.picker-item {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.picker-item.active {
	background-color: #f0f8ff;
}

.item-text {
	font-size: 32rpx;
	color: #333;
}

.picker-item.active .item-text {
	color: #007aff;
	font-weight: bold;
}

.picker-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100rpx;
}

.separator-text {
	font-size: 40rpx;
	color: #333;
	font-weight: bold;
}
</style>